<template lang="pug">
transition(name="dialog")
  .dialog-mask(v-if="show")
    .dialog
      .dialog-header
        .dialog-header-title 选择设备
      .dialog-content
        .device-item(v-for="item, index in devices" :key="index" :class="{ 'active': item.value === activeValue }" @click="selectItem(item)") {{item.name}}
      .dialog-footer
        .dialog-button.confirm(@click="confirm") 确定
</template>

<script>
export default {
  name: 'selectDevice',
  props: {
    show: Boolean
  },
  data () {
    return {
      activeValue: 1,
      devices: [
        { name: '一号读取器', value: 1 },
        { name: '二号读取器', value: 2 },
        { name: '三号读取器', value: 3 },
      ]
    }
  },
  methods: {
    selectItem (item) {
      this.activeValue = item.value
    },
    confirm () {
      this.$emit('confirm', this.activeValue)
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.modal-form-item-code {
  .el-input__inner {
    padding-right: 90px;
  }
}
</style>

<style lang="scss" scoped>
.dialog-leave-active {
  transition: opacity .3s ease;
}
.dialog-enter-active,.dialog-leave-active {
  opacity: 0
}
.dialog-enter-active .select-options,
.dialog-leave-active .select-options {
  transform: scale(0);
  opacity: 0;
}
.select-leave-active {
  transition: opacity .1s ease;
}
.select-enter-active,.select-leave-active {
  opacity: 0
}
.dialog-enter-active .dialog,
.dialog-leave-active .dialog {
  transform: scale(0);
  opacity: 0;
}
.dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8888;
  background: rgba(0,0,0,.5)
}
.dialog {
  transition: all .3s;
  position: fixed;
  width: 300px;
  // max-height: 650px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: #fff;
  z-index: 9999;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.dialog-header {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F2F2F2;
  .dialog-header-title {
    font-size: 20px;
    font-weight: bold;
  }
  .iconfont {
    font-size: 18px;
    color: #999;
  }
}
.device-item {
  padding: 10px 20px;
  font-size: 20px;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  margin: 10px;
  &.active {
    border-color: #ff2e42;
  }
}
.dialog-content {
  padding: 20px;
  max-height: 520px;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 20px;
  .dialog-button {
    padding: 10px 20px;
    font-size: 20px;
    margin-left: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    color: #606266;
    line-height: 1;
    &.confirm {
      border-color: #ff2e42;
      background: #ff2e42;
      color: #fff;
    }
  }
}
</style>
  